<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import { onMounted, onBeforeUnmount, watch, shallowRef } from 'vue'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: [String, Number],
      default: '350px'
    },
    chartData: {
      type: Object,
      required: true
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const chart = shallowRef(null)
    let resizeHandler = null
    
    // 初始化图表
    const initChart = () => {
      const chartDom = document.getElementsByClassName(props.className)[0]
      if (!chartDom) return
      
      chart.value = echarts.init(chartDom)
      setOptions(props.chartData)
    }
    
    // 设置图表配置
    const setOptions = (data = {}) => {
      if (!chart.value) return
      
      const { labels = [], datasets = [] } = data
      
      if (!datasets.length || !labels.length) return
      
      const seriesData = labels.map((label, index) => {
        return {
          name: label,
          value: datasets[0].data[index]
        }
      })
      
      chart.value.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: labels
        },
        series: [
          {
            name: datasets[0].label || '数据分布',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: seriesData,
            color: datasets[0].backgroundColor || [
              '#409EFF', 
              '#67C23A', 
              '#E6A23C', 
              '#F56C6C', 
              '#909399'
            ]
          }
        ]
      })
    }
    
    // 监听数据变化
    watch(
      () => props.chartData,
      (newValue) => {
        setOptions(newValue)
      },
      { deep: true }
    )
    
    // 监听窗口大小变化
    const handleResize = () => {
      if (chart.value) {
        chart.value.resize()
      }
    }
    
    // 生命周期钩子
    onMounted(() => {
      initChart()
      
      if (props.autoResize) {
        resizeHandler = echarts.throttle(handleResize, 300)
        window.addEventListener('resize', resizeHandler)
      }
    })
    
    onBeforeUnmount(() => {
      if (resizeHandler) {
        window.removeEventListener('resize', resizeHandler)
      }
      
      if (chart.value) {
        chart.value.dispose()
        chart.value = null
      }
    })
    
    return {}
  }
}
</script> 